<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8"/>
    <meta name='description' content='CNode：Node.js专业中文社区'>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="nodejs, node, express, connect, socket.io"/>
    <link rel="icon" href="//o4j806krb.qnssl.com/public/images/cnode_icon_32.png" type="image/x-icon"/>
    <title>CNode：Node.js专业中文社区</title>
    <link rel="stylesheet" href="assets/lib/seedsui/seedsui.min.css">
    <script src="assets/lib/artTemplate/template-web.js"></script>
    <script src="assets/lib/zepto/zepto.min.js"></script>
    <style>
        section .tabbar{
            position: fixed;
            top:44px;
            left: 0;
            right: 0;
            z-index: 1;
        }
        section article{
            bottom:53px;
            top:84px;
        }
        .section{
            margin-top: 0px;
        }
        .list-img{
            width: 30px;
            height: 30px;
        }
        .list-title-font{
            font-size: 10px;
        }
        .list-title-title{
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="section_container">
    <header style="z-index: 2;">
        <div class="titlebar">
            <div class="titlebar">
                <a data-toggle="back" href="javascript:history.go(-1);">
                    <i class="icon icon-arrowleft"></i>
                </a>
            </div>
        </div>
    </header>
    <section class="section">
        <article>
            <ul class="list" id="list">
            </ul>
            <strong>&nbsp;&nbsp;添加回复</strong>
            <form class="group" id="form" style="padding:0 8px;">
                <div class="inputbox underline">
                    <input type="hidden" name="accesstoken" id="accesstoken"/>
                </div>
                <div class="inputbox" id="test-editormd">
                    <textarea name="content" class="countvalue input-textarea"  placeholder="请输入评论信息"></textarea>
                    <p class="color-placeholder" style="position:absolute;bottom: 10px;right:0;"></p>
                </div>
                <!--<button class="button info submit left-bottom" id="submit" type="button" style="height:32px;line-height:32px;padding:0 8px;">发布</button>-->
                <input class="button info submit" id="reply" type="button" value="回复">
            </form>
        </article>
    </section>
    <footer>
        <ul class="tabbar tabbar-fooer">
            <li class="tab"  page="index.html">
                <i class="icon icon-home"></i>
                <label class="tab-label">首页</label>
            </li>
            <li class="tab" page="message.html">
                <i class="icon icon-chat"></i>
                <label class="tab-label">消息</label>
            </li>
            <li class="tab" page="user.html">
                <i class="icon icon-person"></i>
                <label class="tab-label">我的</label>
            </li>
        </ul>
    </footer>
    <!-- 加载遮罩 -->
    <div class="loading" id="ID-Loading" style="display: block;background-color: white;">
        <div class="loading-progress-box">
            <div class="loading-progress"></div>
        </div>
    </div>
</div>
<script src="assets/lib/seedsui/seedsui.min.js"></script>
<script src="assets/js/common.js"></script>
<script id="fulltextTemplate" type="text/html">

        <li class="list-li underline">
            <p  class="list-container">
                <label>
                    <strong class="list-title-title">{{$data.title}}
                    </strong>
                </label>
                <label class="float-right">
                   <input type="button" id="submit" class="button submit info" value="收藏">
                   <!--<input type="button" id="succe" data-val='1' value="收藏" >-->
                </label><br>
                发布于{{$data.create_at}}&nbsp;
                作者：{{$data.author_loginname}}&nbsp;
                {{$data.visit_count}}次浏览&nbsp;
                来自{{$data.tab}}
            </p>
        </li>
        <li class="list-li underline">
            <p  class="list-container" id="content" style="padding-left:0px;width: 90%;overflow: auto" >
                {{#$data.content}}
            </p>
        </li>

</script>
<script id="replyTemplate" type="text/html">
    {{each $data value i}}
    <li class="list-li underline">
        <div class="list-thumbnail list-img">
            <img data-load-src="{{value.author.avatar_url}}" src="{{value.author.avatar_url}}"/></div>
        <div class="list-container">
            <div class="list-title list-title-font">
                <p >
                    {{value.author.loginname}}&nbsp;&nbsp;发布于:{{value.create_at.substr(0,10)}}
                </p>
            </div>
            <div class="list-row">
                <p>
                    {{#value.content}}
                </p>
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script>
    //隐藏遮罩
    var loading=new Loading({
        container:"#ID-Loading"
    });
    setTimeout(function(){
        loading.hide();
    },500);

    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]);
        return null;
    };

    $('document').ready(function () {
        $.ajax({
            type:"GET",
            url:"https://cnodejs.org/api/v1/topic/" + GetQueryString("id") ,
            dataType:'json',
            success:function (data) {
                if (data.success==true){
                    var result = data.data;
                    var reply = data.data.replies;
                    localStorage.setItem('article',result.id);
                    var html = template('fulltextTemplate',result);
                    $('#list').append(html);
                    var reply = template('replyTemplate',reply);
                    $('#list').append(reply);
                }else{
                    var popAlert = new Alert("加载超时",{"title":false});
                    popAlert.show();
                }
            }
        })
    });

    $('#submit').click(function () {
        if(checkIsLogin()) {
            var id = localStorage.getItem('article');
            if ($(this).hasClass('info')) {
                $.ajax({
                    type: "POST",
                    url: "https://cnodejs.org/api/v1/topic_collect/collect",
                    data: "id",
                    dataType: 'json',
                    success: function (data) {
                        if (data.success == false) {
                            var popAlert = new Alert("操作失败", {"title": false});
                            popAlert.show();
                        }
                    }
                });
                $(this).removeClass('info');
                $(this).val('取消收藏');
            } else {
                $.ajax({
                    type: "POST",
                    url: "https://cnodejs.org/api/v1/topic_collect/de_collect",
                    data: "id",
                    dataType: 'json',
                    success: function (data) {
                        if (data.success == false) {
                            var popAlert = new Alert("操作失败", {"title": false});
                            popAlert.show();
                        }
                    }
                });
                $(this).addClass('info');
                $('#submit').val('收藏');
            }
        }else {
            var popAlert = new Alert("操作失败，请登录", {"title": false});
            popAlert.show();
        }
    });
  // $('#abc').click(function () {
//       if($('#submit').val()=="收藏"){
//           $('#submit').val("取消收藏");
//       }else {
//           $('#submit').val("收藏");
//       }
//       $('#abc').toggle(function () {
//           $(this).val("取消收藏");
//       },function () {
//           $('#abc').toggle(function () {
//               $(this).val("收藏");
//           });
//       });
 //   });
//    $('#submit').click(function () {
//        $('#submit').toggle(function () {
//            $('#submit').addClass("info").val("收藏");
//        },function () {
//            $('#submit').addClass("white").val("取消收藏");
//        });
//    });
//        $('#collect').toggle(function () {
//            $('#collect').hide();
//        },function () {
//            $('#collect').show();
//        });

    $('#accesstoken').ready(function () {
        var data = localStorage.getItem('accessToken');
        $('#accesstoken').val(data);
        //console.log(data);
    });


    $('#reply').click(function () {
        if(checkIsLogin()) {
            var id = localStorage.getItem('article');
            $.ajax({
                type: "POST",
                url: "https://cnodejs.org/api/v1/topic/" + id + "/replies",
                data: $('#form').serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data.success == true) {
                        alert('发布成功');
                    } else {
                        var popAlert = new Alert("加载超时", {"title": false});
                        popAlert.show();
                    }
                }
            })
        }else {
            var popAlert = new Alert("操作失败，请登录", {"title": false});
            popAlert.show();
        }
    })
</script>
</body>
</html>